<template>
    <div class="panel-body">
        <div class="panel-header">
            <div class="panel-title">
                {{ meta_name }}
            </div>
            <el-tabs v-model="params.level" type="card" @tab-click="list()">
                <el-tab-pane label="全 部" name="0"></el-tab-pane>
                <el-tab-pane v-for="level in levels" :name="''+level.id+''" :label="level.name"></el-tab-pane>
            </el-tabs>
        </div>
        <div class="panel-main">
            <div class="panel-btns">
                <el-button type="success" icon="fa fa-refresh" @click="list()" size="small"> 刷新</el-button>
            </div>
            <div class="panel-search">
                <div class="panel-search-item">
                    <el-input  size="medium" v-model="params.kwd" clearable placeholder="请输入用户昵称" style="width: 250px" class="input-with-select">
                        <el-button type="primary" @click="search()" slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </div>
                <div class="panel-search-item">
                    <el-input  size="medium" v-model="params.mobile" clearable placeholder="请输入用户手机号" style="width: 180px" class="input-with-select"></el-input>
                </div>
                <div class="panel-search-item">
                    <el-input  size="medium" v-model="params.uid" clearable placeholder="请输入用户ID" style="width: 150px" class="input-with-select"></el-input>
                </div>
            </div>
            <el-table v-loading="loading"
                      element-loading-text="努力加载中..."
                      element-loading-spinner="el-icon-loading"
                      ref="multipleHandle"
                      tooltip-effect="dark"
                      :data="listData.data" border>
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="table-expand">
                            <el-form-item label="OPENID">
                                <span>{{ props.row.openid }}</span>
                            </el-form-item>
                            <el-form-item label="邮箱">
                                <span>{{ props.row.email }}</span>
                            </el-form-item>
                            <el-form-item label="地区">
                                <span>{{ props.row.country }}-{{ props.row.province }}-{{ props.row.city }}</span>
                            </el-form-item>
                            <el-form-item label="性别">
                                <span>{{ props.row.sex }}</span>
                            </el-form-item>
                            <el-form-item label="一级代理">
                                <span>{{ props.row.agent_one }}</span>
                            </el-form-item>
                            <el-form-item label="二级代理">
                                <span>{{ props.row.agent_two }}</span>
                            </el-form-item>
                            <el-form-item label="最近登录" >
                                <span>{{moment(props.row.login_at).format('YYYY-MM-DD HH:mm:ss')}}</span>
                            </el-form-item>

                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="id" label="编号" width="70"></el-table-column>
                <el-table-column align="center" prop="avatar" label="图片" width="70">
                    <template slot-scope="scope">
                        <img :src="scope.row.avatar"  style="height: 35px;width: 35px;border-radius: 50%"/>
                    </template>
                </el-table-column>
                <el-table-column prop="username" label="昵称" width="120"></el-table-column>
                <el-table-column align="center" prop="level.name" label="等级" width="60"></el-table-column>
                <el-table-column align="center" prop="mobile" label="手机号" width="120"></el-table-column>
                <el-table-column align="center" prop="integral" label="积分" width="100">
                    <template slot-scope="scope">
                        <el-button @click="integral(scope.row.id)" type="text">{{ scope.row.integral }}</el-button>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="money" label="总金额" width="100"></el-table-column>
                <el-table-column align="center" prop="balance" label="余额" width="120"></el-table-column>
                <el-table-column align="center" prop="created_at" label="注册日期" width="160">
                    <template slot-scope="scope">
                        {{moment(scope.row.created_at).format('YYYY-MM-DD HH:mm:ss')}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" >
                    <template slot-scope="scope">
                        <el-button @click="agent(scope.row.id,scope.row.username)" v-show="access(1901)" icon="fa fa-sitemap" type="primary" size="mini" plain> 代理</el-button>
                        <el-button @click="member(scope.row.id)" v-show="access(1905)" icon="fa fa-vcard" type="primary" size="mini" plain> 档案</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination"  v-if="!loading && listData && listData.total">
                <div class="pagination-total">共 <em> {{listData.total}} </em> 条记录</div>
                <el-pagination v-if="listData.last_page > 1"
                               background
                               :page-size="listData.per_page"
                               layout="prev, pager, next, jumper"
                               :total="listData.total"
                               prev-text="上一页"
                               next-text="下一页"
                               :current-page="listData.current_page"
                               @current-change="changePage">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<!---->
<script>
    import {mapGetters} from 'vuex';
    import {UserList,LevelAll} from '@/utils/request';
    export default {
        computed: {
            ...mapGetters(['meta_name','loading']),
        },
        data() {
            return {
                listData: [],//列表数据
                params: {page: 1, kwd: '', mobile: '',level:'',uid:''},
                levels:[],
            }
        },
        activated() {
            if(this.$route.query.id){
                this.params.uid = this.$route.query.id;
            }else{
                this.params.uid = '';
            }
            this.list();
            this.level();
        },
        methods: {
            //档案
            member(id){
                this.$router.push({name:'Member',query:{id:id}});
            },
            //积分
            integral(id){
                this.$router.push({name:'Integral',query:{id:id}});
            },
            //代理
            agent(id,name){
                this.$router.push({name:'Agent',query:{id:id,name:name}});
            },
            level(){
                LevelAll().then((res)=>{
                    if (res.code == 0) {
                        this.levels = res.data;
                    }
                })
            },
            //列表
            list(){
                this.$store.dispatch('setLoading', true);
                UserList({params: this.params}).then((res)=>{
                    if (res.code) {
                        this.$notify.error({title: 'ERROR', message: res.msg});
                    } else {
                        this.listData = res.data;
                    }
                    this.$store.dispatch('setLoading', false);
                })
            },
            //筛选
            search(){
                this.params.page = 1;
                this.list();
            },
            //分页
            changePage(val) {
                this.params.page = val;
                this.list();
            }
        }
    }
</script>
